<template>
  <div>
    <!-- 搜索框 -->
    <view class="header">
      <view class="goods-search">
        <icon class="goods-search-icon" type="search" size="14"/>
        <input v-model="searchObj.query" @confirm="handleSearch" class="goods-search-in" confirm-type="search" placeholder="搜索"/>
      </view>
    </view>

    <!-- 商品列表 -->
    <div class="goods-list">
      <!-- 排序栏 -->
      <div class="sort-bar" @tap="handleSort">
        <div class="sort-item" :class="{ 'active': active === 0 }" id="0">综合</div>
        <div class="sort-item" :class="{ 'active': active === 1 }" id="1">销量</div>
        <div class="sort-item sort-price" :class="{ 'active': active === 2 }" id="2">价格</div>
      </div>
      <!-- 列表内容 -->
      <div class="goods-content">
        <block v-for="item of goodsList" :key="item.cat_id">
          <div class="goods-item" @tap="handleTapItem(item.goods_id)">
            <div class="item-left">
              <image
                :src="item.goods_small_logo"
                mode="aspectFit"
                lazy-load="false">
              </image>
            </div>
            <div class="item-right">
              <div class="right-title">{{item.goods_name}}</div>
              <div class="right-price">{{item.goods_price}}</div>
            </div>
          </div>
        </block>
      </div>
    </div>
    <view class="footer" v-if="!flag">~∅ 没有数据啦 ∅~</view>
  </div>
</template>

<script>
import { getGoodsList } from '@/api'
export default {
  data () {
    return {
      goodsList: [], // 商品列表数据
      active: 0,
      // 查询 obj
      searchObj: {
        pagenum: 1, // 页数索引
        pagesize: 20, // 默认20条
        query: '',
        // cid: 0
      },
      flag: true // 是否还有数据标志
    }
  },
  // 页面下拉刷新
  onPullDownRefresh () {
    this.searchObj.pagenum = 1
    this.initPage(this.searchObj);
  },
  // 页面触底事件
  onReachBottom () {
    if (this.flag) {
      this.initPage(this.searchObj)
    }
  },
  onUnload () {
    // 离开页面重置列表，以防止 mpvue 复用缓存
    this.goodsList = [],
    this.searchObj = {
      pagenum: 1, // 页数索引
      pagesize: 20, // 默认20条
      query: '',
      // cid: 0
    }
  },
  mounted () {
    // 页面 onLoad 的 options 参数在this.$root.$mp.query 中
    let { query, cid } = this.$root.$mp.query
    this.searchObj.query = query;
    // this.searchObj.cid = cid;
    console.log('searchObj', this.searchObj)
    this.initPage(this.searchObj)
  },
  methods: {
    // 初始化页面
    initPage (query) {
      getGoodsList(query).then(res => {
        console.log('goods', res)
        // 结束下拉刷新
        wx.stopPullDownRefresh();
        if (res.meta.status === 200) {
          // 展开运算符
          this.goodsList = [...this.goodsList, ...res.message.goods];
          // 是否最后一页
          if (this.searchObj.pagenum < Math.ceil(res.message.total/20)) {
            this.flag = true;
            this.searchObj.pagenum++;
          } else {
            this.flag = false
          }
        }
      })
    },
    // 搜索
    handleSearch (e) {
      let searchVal = {
        query: e.target.value
      }
      // 先清空商品列表
      this.goodsList = []
      this.initPage(searchVal)
    },
    // 排序
    handleSort (e) {
      // console.log(e.target.id)
      this.active = +e.target.id
    },
    // 点击进入详情
    handleTapItem (id) {
      // goods_id
      wx.navigateTo({ url: '/pages/goodsdetail/main?goods_id=' + id });
    },
    
  }
}
</script>

<style lang="scss" scoped>
.sort-item.active {
  color: #ff2d49;
}
// 搜索框
.header {
  color: #666;
  padding: 20rpx;
  // background-color: #f4f4f4;
  background-image:linear-gradient(45deg, #ed1c24, #ff9700);
  .goods-search {
    display: flex;
    background-color: #fff;
    border-radius: 10rpx;
    .goods-search-icon {
      display: block;
      width: 14rpx;
      height: 14rpx;
      padding: 15rpx 20rpx;
    }
    .goods-search-in {
      flex: 1;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      padding: 0 20rpx;
    }
  }
}

// 商品列表
.goods-list {
  // 排序列表
  .sort-bar {
    display: flex;
    justify-content: space-around;
    height: 80rpx;
    line-height: 80rpx;
    color: #666;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ccc;
    .sort-item {
      padding: 0 40rpx;
    }
    .sort-price {
      position: relative;
      &::before, &::after {
        position: absolute;
        right: 0;
        font-size: 18rpx;
      }
      &::before {
        content: '▲';
        top: -10rpx;
      }
      &::after {
        content: '▼';
        top: 10rpx;
      }
    }
  }
  // 列表
  .goods-content {
    .goods-item {
      display: flex;
      padding: 20rpx;
      border-bottom: 1rpx solid #eee;
      .item-left {
        image {
          width: 200rpx;
          height: 200rpx;
          flex-shrink: 0; // 伸缩盒的布局属性，防止图片被缩小
        }
      }
      .item-right {
        flex: 1;
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .right-title {
          color: #333;
          // 两行换行
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          // 兼容
          text-overflow: -o-ellipsis-lastline;
          text-overflow: ellipsis;
          line-clamp: 2;
        }
        .right-price {
          font-size: 36rpx;
          color: #ff2d49;
          &::before {
            content: '￥';
            font-size: 26rpx;
          }
        }
      }
    }
  }
}

.footer {
  padding: 20rpx 0 40rpx;
  text-align: center;
  color: #ccc;
  font-size: 28rpx;
}
</style>
